<!--
* description: 车辆管理-车辆用途限制
* author: ligy
* createdDate: 2020-11-17
-->
<template>
  <div class="app-container app-container-table">
    <one-table-template
      ref="multipleTable"
      :dynamic-buttons="tableButtons"
      :dynamic-components="tableComponents"
      :dynamic-api-config="dynamicApiConfigs"
      :dynamic-table-cols="tableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-select="true"
      :dynamic-is-init-table="true"
      :dynamic-is-fix-choose="false"
      :dynamic-is-fix-index="false"
      :dynamic-api-style="'restful'"
      :callback-obj="callbackObj"
    />
  </div>
</template>

<script>

import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import Vue from 'vue'
import api from '@/api/vehicleManagement'
import lov from '@/api/Lov'

export default {
  name: 'VehicleRestrictions',
  components: {
    OneTableTemplate
  },
  mixins: [oneTableWithViewTemplateMixins],
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(
      [to.path, 'supplierMessage-edit'],
      () => {
        next()
      }
    )
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      dynamicApiConfigs: api.vehicleRestrictions,
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'saleOrderId',
              label: '主键ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'updateControlId',
              label: '并发控制ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'lookupValueCode1',
              label: '限制类型编码',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'isRestricted',
              label: '是否已限制',
              align: 'center'
            },
            {
              prop: 'lookupValueName',
              label: '限制类型',
              align: 'center',
              isComponent: true,
              isColComp: true,
              comps: [
                {
                  isAsync: true,
                  compKey: 'compKey10',
                  codeField: 'lookupValueName',
                  clearable: false,
                  // textField: 'lookupValueCode',
                  lookuptype: 'VE1033',
                  component: () => import('@/components/org/commonSelect'),
                  type: 'dropdownList',
                  customObj: {
                    selectType: '1'
                  }
                }
              ],
              width: 110
            },
            {
              prop: 'limitEasonRemark',
              label: '限制原因', width: 180,
              isComponent: true,
              comps: [
                {
                  compKey: 'propKey9',
                  codeField: 'limitEasonRemark',
                  isColComp: true,
                  clearable: false,
                  component: () => import('@/components/org/commonInput')
                }
              ]
            },
            // {
            //   prop: 'hostLimitDate',
            //   label: '限制时间',
            //   align: 'center',
            //   width: 140
            // },
            {
              prop: 'carState',
              label: '车辆状态',
              align: 'center'
            },
            {
              prop: 'salesPlanCode',
              label: '销售计划号',
              align: 'center',
              width: 140
            },
            {
              prop: 'VINCode',
              label: 'VIN码',
              align: 'center',
              width: 140
            },
            {
              prop: 'carSeriesCode',
              label: '车系编码',
              align: 'center'
            },
            {
              prop: 'carSeriesCn',
              label: '车系',
              align: 'center'
            },
            {
              prop: 'carConfigCode',
              label: '车型编码',
              align: 'center'
            },
            {
              prop: 'carConfigCn',
              label: '车型名称',
              align: 'center'
            },
            {
              prop: 'optionalPagName',
              label: '选装包',
              align: 'center'
            },
            {
              prop: 'carColorName',
              label: '车身颜色',
              align: 'center'
            },
            {
              prop: 'carIncolorName',
              label: '内饰颜色',
              align: 'center'
            },
            {
              prop: 'lockCode',
              label: '锁车码',
              align: 'center'
            },
            {
              prop: 'lockPosition',
              label: '锁车车间/位置',
              align: 'center'
            },
            {
              prop: 'lockReason',
              label: '锁车原因',
              align: 'center'
            },
            {
              prop: 'lockBeginDate',
              label: '锁车限制开始日期',
              align: 'center',
              width: 140
            },
            {
              prop: 'lockEndDate',
              label: '锁车限制结束日期',
              align: 'center',
              width: 140
            },
            {
              prop: 'qmsState',
              label: 'QMS状态',
              align: 'center'
            },
            {
              prop: 'hostQualityState',
              label: '质量状态',
              align: 'center'
            },
            {
              prop: 'carHouseName',
              label: '仓库',
              align: 'center',
              width: 140
            },
            {
              prop: 'inStockDate',
              label: '入库时间',
              align: 'center',
              width: 140
            }
          ],
      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '车系：',
              codeField: 'carSeriesId',
              oFields: 'carSeriesId,carSeriesCn',
              customObj: {
                api: lov.listOfCarSeries,
                selectType: '1'
              },
              component: () => import('@/components/org/commonSelect'),
              type: 'dropdownList',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'compKey2',
              labelName: '车型名称：',
              codeField: 'carConfigId',
              component: () => import('@/components/org/commonSelect'),
              oFields: 'carConfigId,carConfigCn',
              parentFileds: 'value:carSeriesId',
              customObj: {
                listQuery: { carSeriesId: '' },
                api: lov.queryCarType
              },
              type: 'dropdownList',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'compKey3',
              labelName: '选装包：',
              codeField: 'optionalPagId',
              component: () => import('@/components/org/commonSelect'),
              parentFileds: 'value:carConfigId',
              oFields: 'optionalPagId,optionalPagName',
              customObj: {
                api: lov.queryCarOptionalPagLinkMessage,
                listQuery: {
                  carConfigId: ''
                },
                selectType: '1'
              },
              type: 'dropdownList',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'compKey4',
              labelName: '车身颜色：',
              codeField: 'carColorId',
              component: () => import('@/components/org/commonSelect'),
              oFields: 'carColorId,carColorName',
              parentFileds: 'value:carConfigId|carSeriesId|optionalPagId',
              customObj: {
                listQuery: {
                  carConfigId: '', carSeriesId: '', optionalPagId: ''
                },
                selectType: '1',
                api: lov.queryCarColorLinkMessage
              },
              type: 'dropdownList',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'compKey5',
              labelName: '内饰颜色：',
              codeField: 'carIncolorId',
              component: () => import('@/components/org/commonSelect'),
              oFields: 'carIncolorId,carIncolorName',
              parentFileds: 'value:carConfigId|carSeriesId|optionalPagId',
              customObj: {
                listQuery: {
                  carConfigId: '', carSeriesId: '', optionalPagId: ''
                },
                selectType: '1',
                api: lov.queryCarInColorLinkMessage
              },
              type: 'dropdownList',
              isMul: false,
              isMust: false
            },
            // 销售计划号查询
            {
              compKey: 'compKey11',
              labelName: '销售计划号：',
              codeField: 'salesPlanCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: false,
              span: 6
            },
            // VIN码：
            {
              compKey: 'compKey6',
              labelName: 'VIN码：',
              codeField: 'VINCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: false
            },
            // 入库时间
            {
              compKey: 'compKey7',
              labelName: '入库时间：',
              codeField: 'startTime,endTime',
              component: () => import('@/components/org/datePicker/datePicker'),
              dateType: 'daterange',
              isMust: false,
              isMul: false
            },
            // 仓库
            {
              compKey: 'compKey8',
              labelName: '仓库：',
              codeField: 'stockName',
              component: () => import('@/components/ve/carStockHouse'),
              dataToObject: { warehouseId: '1' },
              type: 'dropdownList',
              isMust: false
            },
            // 限制类型
            {
              compKey: 'compKey9',
              labelName: '限制类型：',
              codeField: 'lookupValueCode',
              lookuptype: 'VE1033',
              component: () => import('@/components/org/LookupValue'),
              type: 'dropdownList',
              isMust: false
            },
            // 车辆状态
            {
              compKey: 'compKey10',
              labelName: '车辆状态：',
              codeField: 'carStatus',
              lookuptype: 'VE0207',
              component: () => import('@/components/org/LookupValue'),
              type: 'dropdownList',
              isMust: false
            }
          ],
      tableButtons: [
        {
          conmpKey: 'compKey11',
          type: '',
          size: 'small',
          text: '保存',
          clickEvent: () => this.send(),
          position: 'left'
        },
        {
          conmpKey: 'compKey12',
          type: '',
          size: 'small',
          clickEvent: () => this.export(),
          text: this.$t('sys.button.export'),
          name: 'export',
          position: 'left' // 导出
        },
        {
          conmpKey: 'compKey13',
          type: 'primary',
          size: 'small',
          text: this.$t('sys.button.query'), // 查询
          name: 'search', // 按钮图标样式
          clickEvent: () => this.queryTable(1),
          position: 'right'
        },
        {
          conmpKey: 'compKey14',
          size: 'small',
          name: 'reset',
          clickEvent: () => this.reset(),
          text: this.$t('sys.button.reset'),
          position: 'right' // 重置
        }
      ],
      formField: this.$utils.getFormField(this, {
        salesPlanCode: '',
        carSeriesId: '',
        carConfigId: '',
        optionalPagId: '',
        carColorId: '',
        carIncolorId: '',
        VINCode: '',
        lookupValueCode: '',
        carStatus: '',
        carStockHouse: '',
        startTime: '',
        endTime: '',
        stockId: '',
        stockName: '',
        stockCode: ''
      }),
      selectionList: [],
      list: [],
      callbackObj: {
        onRowCompCodeChange: (compkey, index, res, value) => {
          if (compkey === 'compKey10' && value.length > 0) {
            this.$refs.multipleTable.list[index].lookupValueCode = value[0].lookupValueCode
          }
        },
        onCheckSelectChange: (selection) => {
          this.selectionList = selection
          this.list = this.selectionList.reduce((pre, cur) => {
            // pre.push({ carStoreId: cur.carStoreId,
            //   updateControlId: cur.updateControlId,
            //   VINCode: cur.VINCode,
            //   lookupValueCode: cur.lookupValueCode
            // })
            pre.push(cur.index)
            return pre
          }, [])
        }
      }
    }
  },
  methods: {
    // 导出
    export() {
      const fileName = this.$utils.fileNameWithTime('车辆限制.xlsx')
      this.$requestAPI({
        apiUrl: api.exportCarRestrictions.APIUrl,
        variables: { ...this.formField, dataType: 'excel' }
      }).then(res => {
        this.$utils.downloadFile(res, fileName)
      }).catch(err => {
        console.log(err)
      })
    },
    // 保存
    send() {
      if (this.selectionList.length === 0) {
        this.$message('请选择!')
      } else {
        var datalist = []
        this.list.forEach(item => {
          datalist.push(this.$refs.multipleTable.list[item])
        })
        this.$requestAPI({
          apiUrl: api.updateCarRestrictions.APIUrl,
          variables: { infoList: datalist }
        }).then(res => {
          this.$nextTick(() => {
            this.queryTable(1)
          })
          this.$message(res.msg)
        })
      }
    }
  }
}
</script>

<style></style>
